.red{
  position: relative;
  z-index: 10;
  height: 100%;
}
#red{
  position: absolute;
  z-index: 11;
  left:50%;
  top:50%;
  transition:transform .3s;
  transform: translate(-50%,-50%);
  width: 250px;
  height: 370px;
  &.open{
    background:url("../images/red-open.png") no-repeat;
    background-size: 100% 100%;
    .header{
      position: absolute;
      top:-25px;
      left:50%;
      transform: translateX(-50%);
      width: 70px;
      height: 70px;
      border-radius: 50px;
      background-size: cover;
      border: 2px solid #fff;
      box-sizing: border-box;
    }
    .cloud{
      position: absolute;
      top:-30px;
      left:50%;
      transform: translateX(-50%);
      width: 100px;
      height:100px;
      background:url("../images/red-header.png");
      background-size: 100% 100%;
    }
    .nickname,.title{
      position: absolute;
      width: 100%;
      top:80px;
      text-align: center;
      color: yellow;
      font-size:14px;
    }
    .title{
      top:100px;
    }
    .error{
      position: absolute;
      width: 100%;
      top:120px;
      text-align: center;
      color: yellow;
    }
    .open-btn{
      position: absolute;
      width: 70px;
      height: 70px;
      left:50%;
      bottom: 20px;
      transform: translateX(-50%);
      background:url("../images/red-open-button.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  &.opening{
    .open-btn{
      background:url("../images/red-open-button.gif") no-repeat;
      background-size: 100% 100%;
    }
  }
  &.opened{
    background:url("../images/red-opened.png") no-repeat;
    background-size: 100% 100%;
    .money{
      position: absolute;
      width: 100%;
      top:60px;
      font-size: 20px;
      color: yellow;
      text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
      text-align: center;
    }
    .nickname{
      position: absolute;
      min-width: 10px;
      height: 30px;
      line-height: 33px;
      text-indent: 35px;
      top:90px;
      left:50%;
      transform: translateX(-50%);
      color: yellow;
      text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
      font-weight: bolder;
      font-size:14px;
      background: no-repeat;
      background-size: 30px;
    }
    .close{
      position: absolute;
      left:50%;
      top:20px;
      transform:translateX(-50%);
      color: #fff;
      width: 30px;
      height: 30px;
      line-height: 30px;
      border-radius: 15px;
      background: rgba(222,49,33,.5);
      text-align: center;
      i{
        font-size:25px;
      }
    }
  }
}